<template>
	<!-- 优惠券 -->
	<view class="">
		<!-- <view class="nav">
			<scroll-view class="tab-scroll" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
				<view class="tab-scroll_box">
					<view class="tab-scroll_item" v-for=" (item,index) in tabList" :key="index" 
					 :class="{'active':isActive==index}" @click="chenked(index)">
							{{item.name}}
						<view class="icons"></view>
					</view>
				</view>
			</scroll-view>
		</view> -->
		<!-- 内容切换 -->
		<view class="order_centext" style="padding-top: 120rpx;">
			<view class="nav_item">
				<view class="scroll-items">
					<view class="item" v-for="(item,index) in orderList" :key="index" >
						<view class="jd-top-wap bottom-line">
							<view class="flex jcsb">
								<view class="flex-1 fc-33">订单编号：{{item.order_sn}}</view>
								<!-- <view class="fc-52c" v-if="item.status == 1">已结算</view> -->
								<!-- <view class="fc-df5" v-if="item.status == 2">未结算</view> -->
							</view>
							<view class="flex jcsb mar-top-15"  style="align-items: center;">
								<view class="flex-1 flex">
									<view class="jd-img">
										<!-- <image :src="item.src"></image> -->
									</view>
									<view class="mar-left-20 flex-1">
										<view class="fc-00 fs-28 two-ellipsis">{{item.hotelRoomName}}</view>
										<view class="fc-66 fs-26 mar-top-10">成交金额：{{item.payAmount}}</view>
									</view>
								</view>
								<view class="fc-33 fs-28">+{{userInfo.id == inviterUserId? item.cashBack:item.firsrtCashBack}}</view>
							</view>
							<view class="fs-26 fc-66">{{item.createTime}}</view>
						</view>						
					</view>
				</view>
				
			</view>		
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
export default {
		data() {
			return {
				tabList:[
					{name: "全部",status:0},
					{name: "已结算",status:1}, 
					{name: "未结算",status:2},
				],
				isActive:0,				
				contentScrollW: 0, // 导航区宽度
				scrollLeft: 0, // 横向滚动条位置
				orderList: [],//列表
				empty:false,
				status:'',//状态	
			}
		},
		computed: {
			...mapState(["userInfo"]),
		},
		onLoad(option) {			
			
		},
		mounted() {			
			// this.getScrollW()
			this.getOrderList()
		},
		
		methods: {					
			// 获取分销订单记录
			getOrderList() {
				if(!this.userInfo.id) {
					this.$store.dispatch("reLogin")
					return;
				}
				var param = {
					userId: this.userInfo.id
				}
				this.$apis.getFundOrderList(param).then(res=>{
					this.orderList = res.rows;
				})
			},
			//切换 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
			getScrollW() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.tab-scroll').boundingClientRect(data => {
					  // 拿到 scroll-view 组件宽度
					  this.contentScrollW = data.width
				 }).exec();
				 query.selectAll('.tab-scroll_item').boundingClientRect(data => {
					 let dataLen = data.length;
					  for (let i = 0; i < dataLen; i++) {
						  //  scroll-view 子元素组件距离左边栏的距离
						  this.tabList[i].left = data[i].left;
						 //  scroll-view 子元素组件宽度
						 this.tabList[i].width = data[i].width
					}
				 }).exec()
			},
			// 当前点击子元素靠左留一个选项展示，子元素宽度不相同也可实现
			chenked(index) {
				this.isActive = index;
				this.scrollLeft = 0;
				for (let i = 0; i < index - 1; i++) {
					this.scrollLeft += this.tabList[i].width
				};
				this.status = this.tabList[index].status
				console.log(this.status)
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #f6f6f6;
		.flex-1{
			flex: 1;
		}
		.lin-60{
			line-height: 60rpx;
		}		
		.nav{
			background-color: #fff;	
			position: fixed;
			z-index: 99;
			width: 100%;
			align-items: center;
			height: 100rpx;
			.tab-scroll{
				flex: 1;
				overflow: hidden;
				box-sizing: border-box;
				padding-left: 30rpx;
				padding-right: 30rpx;
				.tab-scroll_box{
					display: flex;
					align-items: center;
					flex-wrap: nowrap;
					box-sizing: border-box;
					.tab-scroll_item{
						width: 33%;
						line-height: 60rpx;
						margin-right:13rpx;
						flex-shrink: 0;
						padding-bottom:10px;
						display: flex;
						justify-content: center;
						font-size: 16px;
						padding-top: 10px;
						position: relative;
						.icons{
							display: none;
							width: 80rpx;
							height:6rpx;
							background: #84C0F4;
							border-radius: 4rpx;
							opacity: 1;	
							position: absolute;
							bottom: 0;
							left: 0;
							right: 0;
							margin: auto;
						}
					}
					.active{
						color:#333 ;
					}
					.active>.icons{
						display: block;
					}	
					/* 隐藏滚动条，但依旧具备可以滚动的功能 */
					/deep/.uni-scroll-view::-webkit-scrollbar {
						display: none
					}
				}
			}
		}
		.scroll-items{	
			.item{
				background-color: #fff;
				margin: 0 25rpx 20rpx;
				border-radius: 10rpx;
				.jd-top-wap{
					padding: 30rpx 32rpx;
					.jd-img{
						width: 84rpx;
						height: 84rpx;
						border-radius: 8rpx;
						image{
							width: 84rpx;
							height: 84rpx;
							display: block;					
							border-radius: 8rpx;
						}
					}
					.jd-info{
						flex: 1;
						.w-205{
							width: 410rpx;
							display: block;
						}
					}
				}
				.opera-btn{
					justify-content: flex-end;
					padding: 24rpx 32rpx;
					button{
						min-width: 60rpx;
						padding: 0 22rpx;
						height: 60rpx;
						background: #FFFFFF;
						border-radius: 4rpx;
						text-align: center;
						line-height: 60rpx;
						font-size: 28rpx;
						color: #8EC7F9;
						border: 1px solid #8EC7F9;
					}
					.pay-but{
						background: #7BC2F8;
						color: #fff;
						margin-left: 20rpx;
					}
					.evalbut{
						border: 1px solid #7BC2F8;
						background: #fff;
						color: #7BC2F8;
					}
				}
			}
		}
	}
	
</style>
